<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            --brimWH: 10px; /* 可以修改该值来改变边框大小 */
        }

        .move-box {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100px;
            height: 100px;
            background-color: rgba(0, 128, 0, 0.301);
        }

        .move-box span:nth-of-type(2n - 1) {
            position: absolute;
            /* z-index: 1; */
            height: var(--brimWH);
            width: var(--brimWH);
            background-color: red;
        }

        .e,
        .w {
            position: absolute;
            top: 0px;
            height: 100%;
            width: var(--brimWH);
            background-color: orange;
        }

        .n,
        .s {
            position: absolute;
            height: var(--brimWH);
            width: 100%;
            background-color: orange;
        }

        .nw {
            left: calc(0% - var(--brimWH));
            top: calc(0% - var(--brimWH));
            cursor: nw-resize;
        }

        .n {
            top: calc(0% - var(--brimWH));
            cursor: n-resize;
        }

        .ne {
            top: calc(0% - var(--brimWH));
            right: calc(0% - var(--brimWH));
            cursor: ne-resize;
        }

        .e {
            right: calc(0% - var(--brimWH));
            cursor: e-resize;
        }

        .se {
            bottom: calc(0% - var(--brimWH));
            right: calc(0% - var(--brimWH));
            cursor: se-resize;
        }

        .s {
            bottom: calc(0% - var(--brimWH));
            cursor: s-resize;
        }

        .sw {
            bottom: calc(0% - var(--brimWH));
            left: calc(0% - var(--brimWH));
            cursor: sw-resize;
        }

        .w {
            left: calc(0% - var(--brimWH));
            cursor: w-resize;
        }
    </style>
</head>

<body>
    <div class="move-box">
        <span class="nw"></span>
        <span class="n"></span>
        <span class="ne"></span>
        <span class="e"></span>
        <span class="se"></span>
        <span class="s"></span>
        <span class="sw"></span>
        <span class="w"></span>
    </div>
    <script>
        let moveBox = document.querySelector(".move-box");
        moveBox.addEventListener("mousedown", function (e) {
            let initialBoxX = this.offsetLeft,
                initialBoxY = this.offsetTop,
                startX = e.clientX,
                startY = e.clientY;

            let tarEle = e.target,
                initialBoxW = moveBox.offsetWidth,
                initialBoxH = moveBox.offsetHeight;

            if (e.target.tagName === "DIV") {
                document.addEventListener("mousemove", moveChange);
                document.addEventListener("mouseup", function () {
                    this.removeEventListener("mousemove", moveChange);
                });
                function moveChange(e) {
                    let changeX = e.clientX,
                        changeY = e.clientY;
                    moveBox.style.left = changeX - startX + initialBoxX + "px";
                    moveBox.style.top = changeY - startY + initialBoxY + "px";
                }
            }
            else if (e.target.tagName === "SPAN") {
                tarEle.addEventListener("mousedown", function () {
                    document.addEventListener("mousemove", sizeChange);
                });
                document.addEventListener("mouseup", function () {
                    this.removeEventListener("mousemove", sizeChange);
                });
                function sizeChange(e) {
                    let deltaX = e.clientX - startX,
                        deltaY = e.clientY - startY;
                    if (tarEle.classList.contains("nw")) {
                        moveBox.style.left = initialBoxX + deltaX + "px";
                        moveBox.style.width = initialBoxW - deltaX + "px";
                        moveBox.style.top = initialBoxY + deltaY + "px";
                        moveBox.style.height = initialBoxH - deltaY + "px";
                    }
                    else if (tarEle.classList.contains("n")) {
                        moveBox.style.top = initialBoxY + deltaY + "px";
                        moveBox.style.height = initialBoxH - deltaY + "px";
                    }
                    else if (tarEle.classList.contains("ne")) {
                        moveBox.style.width = initialBoxW + deltaX + "px";
                        moveBox.style.top = initialBoxY + deltaY + "px";
                        moveBox.style.height = initialBoxH - deltaY + "px";
                    }
                    else if (tarEle.classList.contains("e")) {
                        moveBox.style.width = initialBoxW + deltaX + "px";
                    }
                    else if (tarEle.classList.contains("se")) {
                        moveBox.style.width = initialBoxW + deltaX + "px";
                        moveBox.style.height = initialBoxH + deltaY + "px";
                    }
                    else if (tarEle.classList.contains("s")) {
                        moveBox.style.height = initialBoxH + deltaY + "px";
                    }
                    else if (tarEle.classList.contains("sw")) {
                        moveBox.style.left = initialBoxX + deltaX + "px";
                        moveBox.style.width = initialBoxW - deltaX + "px";
                        moveBox.style.height = initialBoxH + deltaY + "px";
                    }
                    else if (tarEle.classList.contains("w")) {
                        moveBox.style.left = initialBoxX + deltaX + "px";
                        moveBox.style.width = initialBoxW - deltaX + "px";
                    }
                }
            }
        }, true);
    </script>
</body>

</html>